<template>
    <div class="wrapper">
        <div class="header">
            <p>设置密码</p>
            <van-icon @click="$router.go(-1)" size="26px" color name="arrow-left" />
        </div>
        <van-form @submit="onSubmit">
            <van-field v-model="mobile" center clearable placeholder="请输入手机号">
                <template #button>
                    <span @click="getCode" v-if="!flag" style="color:red">获取验证码</span>
                    <span v-else style="color:#999">获取验证码({{count}})</span>
                </template>
            </van-field>
            <van-field v-model="sms_code" type placeholder="请输入验证码" />
            <van-field v-model="password" type="password" placeholder="请输入密码" />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">确定</van-button>
            </div>
        </van-form>
    </div>
</template>
  
<script>
import { getSmsloginPort, setPassPort } from '@/api/login'
const reg =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
export default {
    data() {
        return {
            flag: false,
            mobile: '',
            sms_code: '',
            password: '',
            sms_type: 'getPassword',
            count: 10
        }
    },
    computed: {},
    created() { },
    mounted() { },
    watch: {},
    methods: {
        async onSubmit() {
            console.log('llll');
            let res = await setPassPort({ mobile: this.mobile, sms_code: this.sms_code, password: this.password })
            if (res.code == 200) {
                this.$Toast.success({
                    message: '设置成功',
                    position: 'top',
                })
                this.$router.push('/login')
            } else {
                this.$Toast.fail({
                    message: res.msg,
                    position: 'top',
                })
            }
        },
        // 点击获取验证码
        async getCode() {
            console.log(this);
            if (!reg.test(this.mobile)) {
                this.$Toast.fail({
                    message: '手机号码格式不正确',
                    position: 'top',
                })
                return false
            }
            this.flag = true
            if (this.flag) {

                let timer = setInterval(() => {
                    console.log('---', this);
                    if (this.count > 0) {
                        return this.count--
                    } else {
                        this.flag = false
                        this.count = 10
                        clearInterval(timer)
                    }

                }, 1000)
                let res = await getSmsloginPort({ mobile: this.mobile, sms_type: this.sms_type })
                console.log(res)
                if (res.code == 200) {
                    this.$Toast({
                        message: '发送成功',
                        position: 'top',
                    })
                } else {
                    this.$Toast({
                        message: res.msg,
                        position: 'top',
                    })
                }
            }

        },
    },
    components: {}
}
</script>
  
<style lang="scss" scoped>
.wrapper {
    width: 100vw;
    position: relative;
    background: #f4f4f4;

    .van-field {
        height: 60px;
        font-size: 18px;
    }

    .header {
        width: 100%;
        height: 60px;

        background: #fff;
        margin-bottom: 15px;
        position: relative;

        i {
            line-height: 40px;
        }

        p {
            text-align: center;
            height: 60px;
            line-height: 60px;
            width: 100%;
            font-size: 20px;
            margin: 0;
        }

        .van-icon {
            position: absolute;
            top: 10px;
            left: 10px;
        }
    }

    .van-button {
        width: 675px;
        height: 60px;
        margin: 15px 35px 0;
        background-image: linear-gradient(to right, #f5b65e, #eb7834);
        border-radius: 40px;
        font-size: 24px;
        border: none;
    }
}
</style>
  